<template>
    <div class="user_login">
        <div class="blur"></div>

        <div class="img">
            <span @click="submitFn"></span>
            <div class="main">
                <div class="title">
                    <div>手机号码登录</div>
                    <span>|</span>
                    <div>微信扫码登录</div>
                </div>
                <div class="phone">
                    <input type="tel" placeholder="请输入手机号" />
                </div>

                <slide-verify :l="42" :r="10" :w="320" :h="143" @success="onSuccess" @fail="onFail" @refresh="onRefresh"
                    :slider-text="msg" :style="{ width: '100%' }" class="slide-box" ref="slideBlock"></slide-verify>
                <div class="mes">
                    <input type="tel" placeholder="请输入验证码" />
                    <button>获取验证码</button>
                </div>
                <button @click="removeLogin">登录</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: '向右填充拼图'
        }
    },
    methods: {
        removeLogin() {
            if (this.msg == "再试一次" || this.msg == "向右填充拼图") {
                alert("请滑动拼图");
                return
            }
            this.$store.commit('changeLogin', false)
            this.$store.commit('yes', true)
        },
        // 拼图成功
        onSuccess(times) {
            let ms = (times / 1000).toFixed(1);
            this.msg = "login success, 耗时 " + ms + "s";
        },
        // 拼图失败
        onFail() {
            this.onRefresh(); // 重新刷新拼图
        },
        // 拼图刷新
        onRefresh() {
            this.msg = "再试一次";
        },
        submitFn() {
            //以msg文字内容来判断是否有进行拼图滑块验证
            this.$store.commit("changeLogin", false);
            // location.href = '/index'
        }
    }
}
</script>

<style lang="less" scoped>
.user_login {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    // left: 50%;
    // top: 50%;
    z-index: 99;
    // filter: blur(100px);
    // 动画


    .blur {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgba(0, 0, 0, .4);

    }

    .img {
        width: 555px;
        height: 423px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        // transform: translate(-50%, -50%);
        background: url("@/assets/img/login-box-bg.png");

        >span::before {
            position: absolute;
            top: 10px;
            right: 70px;
            color: #000;
            cursor: pointer;
            font-size: 50px;
            content: "x";


        }

        .main {
            margin: 0 auto;
            padding: 52px 40px;
            width: 420px;
            box-sizing: border-box;

            color: #000;

            >button {
                width: 100%;
                height: 50px;
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                line-height: 50px;
                letter-spacing: 0px;
                color: #ffffff;
                background-color: #0a328e;
                cursor: pointer;

                &:hover {
                    transition: background-color .3s ease-out;
                    background-color: #3a5aa4;
                }
            }

            .title {
                font-size: 16px;
                display: flex;
                justify-content: center;

                span {
                    padding: 0 15px;
                }

                div {
                    cursor: pointer;

                    &:last-child {
                        color: #e8e8e8
                    }

                }
            }

            .phone {
                width: 100%;
                height: 40px;
                margin: 10px 0;

                input {
                    width: 100%;
                    height: 100%;
                    border-color: #ccc;
                    outline: none;
                    text-indent: 5px;
                    box-sizing: border-box;
                    border-width: 1px;
                    border-style: solid;
                    border-radius: 2px;
                }
            }

            .mes {
                height: 40px;
                margin: 10px 0;
                display: flex;
                margin-top: 15px;

                input {
                    width: 100%;
                    height: 100%;
                    border-color: #ccc;
                    outline: none;
                    text-indent: 5px;
                    box-sizing: border-box;
                    border-width: 1px;
                    border-style: solid;
                    border-radius: 2px;

                }

                button {
                    width: 120px;
                    font-size: 12px;
                    margin-left: 5px;
                    border: none;
                    cursor: pointer;
                }
            }

            /deep/ .slide-box {
                width: 100%;
                position: relative;
                box-sizing: border-box;

                canvas {

                    position: absolute;
                    left: 0;
                    top: -140px;
                    display: none;
                    width: 100%;
                    box-sizing: border-box;
                }

                .slide-verify-block {
                    width: 85px;
                    height: 156px;
                }

                .slide-verify-refresh-icon {
                    top: -120px;
                    display: none;
                }

                &:hover {
                    canvas {
                        display: block;
                    }

                    .slide-verify-refresh-icon {
                        display: block;
                    }
                }


            }
        }

    }
}
</style>